<template>
  <div>
    <InputItem v-for="item in books" :key="item.id" :book="item"></InputItem>
  </div>
</template>

<script>
import InputItem from './components/InputItem'

export default {

  name: "App",
  data(){
    return {
      books:[
        {id:'001',title:'三国演义'},
        {id:'002',title:'红楼梦'},
        {id:'003',title:'西游记'}
      ]
    }
  },
  components:{
    InputItem,
  },
  methods:{
    changeBooks(id,title){
      this.books.forEach(item => {
        if(item.id === id){
          item.title = title
        }
      })
    }
  },
  mounted() {
    this.$bus.$on('changeBooks',this.changeBooks)
  },
  beforeDestroy() {
    this.$bus.$off('changeBooks')
  }
}
</script>

<style scoped>

</style>